<template>
  <div>
    <div style="padding: 20px;">
      <a-row
        type="flex"
        justify="space-between"
        style="color: #333333;"
      >
        <a-col
          :span="11"
          class="col-wrapper"
        >
          <div class="info-box">
            <div class="info-title">
              <span>{{ search.year + '年' }}</span>
                <span>{{ duration === 'monthly' ? search.month + '月份' : '' }}</span>
                  <span>{{ duration === 'quarterly' ? quarterMap[search.quarter-1].label : '' }}</span>
                    <span>数据中心能耗统计</span>
            </div>

            <div class="info-content">
              <div class="info-content-item">
                <div class="item-title">{{ durationMap[duration].zh }}采集能耗最高值</div>
                  <div class="item-text">
                    <span>{{consumptionData.max ? consumptionData.max : '--'}}</span>
                    <span>W</span>
                  </div>
                </div>
                <div class="info-content-item">
                  <div class="item-title">{{ durationMap[duration].zh }}采集能耗平均值</div>
                    <div class="item-text">
                      <span>{{consumptionData.avg ? consumptionData.avg : '--'}}</span>
                      <span>W</span>
                    </div>
                  </div>
                  <div class="info-content-item">
                    <div class="item-title">{{ durationMap[duration].zh }}采集能耗最低值</div>
                      <div class="item-text">
                        <span>{{consumptionData.min ? consumptionData.min : '--'}}</span>
                        <span>W</span>
                      </div>
                    </div>
                  </div>
                </div>
        </a-col>

        <a-col
          :span="9"
          class="col-wrapper"
        >
          <div
            class="flex-end"
            style="margin-bottom: 15px;"
          >
            <span>选择数据中心</span>
            <a-select
              class="search-tool"
              v-model="datacenterId"
            >
              <a-select-option
                v-for="d in datacenterList"
                :key="d.id"
                :value="d.id"
              >
                {{ d.name }}
                </a-select-option>
            </a-select>
          </div>

          <div
            class="flex-end"
            style="margin-bottom: 15px;"
          >
            <span>选择搜索年份</span>
            <a-select
              class="search-tool"
              v-model="search.year"
            >
              <a-select-option
                v-for="d in yearMap"
                :key="d.value"
                :value="d.value"
              >
                {{ d.label }}
                </a-select-option>
            </a-select>
          </div>

          <div
            class="flex-end"
            v-if="duration === 'quarterly'"
            style="margin-bottom: 15px;"
          >
            <span>选择搜索季度</span>
            <a-select
              class="search-tool"
              v-model="search.quarter"
            >
              <a-select-option
                v-for="d in quarterMap"
                :key="d.value"
                :value="d.value"
              >
                {{ d.label }}
                </a-select-option>
            </a-select>
          </div>

          <div
            class="flex-end"
            v-if="duration === 'monthly'"
            style="margin-bottom: 15px;"
          >
            <span>选择搜索月份</span>
            <a-select
              class="search-tool"
              v-model="search.month"
            >
              <a-select-option
                v-for="d in 12"
                :key="d"
                :value="d"
              >
                {{ d + '月'  }}
                </a-select-option>
            </a-select>
          </div>

          <div class="flex-end">
            <a-button
              type="primary"
              @click="loadStatisticByDuration"
            >
              搜索
            </a-button>
          </div>
        </a-col>
      </a-row>

      <a-row>
        <a-col
          :span="24"
          class="col-wrapper"
          style="margin-top: 36px;"
        >
          <span class="card-title">
            {{ durationMap[duration].zh + durationMap[duration].period }}采集能耗平均值图表情况
          </span>

            <ConsumptionBar
              :duration="duration"
              :consumptionList="consumptionList"
            />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
  import { gPostAction } from '@/api/manage'
  import ConsumptionBar from './ConsumptionBar'

  export default {
    name: 'ConsumptionStatistics',
    props: {
      duration: {
        type: String,
        default: 'yearly'
      }
    },
    components: { ConsumptionBar },
    data() {
      return {
        durationMap: {
          yearly: {
            zh: '年度',
            period: '每月'
          },
          quarterly: {
            zh: '季度',
            period: '每月'
          },
          monthly: {
            zh: '月度',
            period: '每日'
          },
        },
        yearMap: [{ label: '2021年', value: 2021 }, { label: '2020年', value: 2020 }, { label: '2019年', value: 2019 }, { label: '2018年', value: 2018 }],
        quarterMap: [{
          label: '第一季度',
          value: 1
        }, {
          label: '第二季度',
          value: 2
        }, {
          label: '第三季度',
          value: 3
        }, {
          label: '第四季度',
          value: 4
        }],
        search: {
          year: 2021,
          quarter: 1,
          month: 1,
        },
        datacenterId: '',
        datacenterList: [],
        consumptionData: {},
        consumptionList: []
      }
    },
    watch: {
      duration(val) {
        this.loadStatisticByDuration()
      }
    },
    mounted() {
      this.loadDatacenterList().then(res => {
        this.loadStatisticByDuration()
      })
    },
    methods: {
      loadDatacenterList() {
        return new Promise((resolve, reject) => {
          gPostAction('/asset/listDatacenter', {}).then((res) => {
            if (res.success) {
              this.datacenterList = res.data
              if (this.datacenterList.length) {
                this.datacenterId = this.datacenterList[0].id
              }
              resolve(res)
            } else {
              reject(res)
            }
          })
        })
      },
      loadStatisticByDuration() {
        if (!this.datacenterId) { return }
        let url = ''
        let postData = {}
        if (this.duration === 'yearly') {
          url = '/dcEnergy/statisticsByYear'
        } else if (this.duration === 'quarterly') {
          url = '/dcEnergy/statisticsByQuarter'
          postData = {
            quarter: this.search.quarter,
          }
        } else if (this.duration === 'monthly') {
          url = '/dcEnergy/statisticsByMonth'
          postData = {
            month: this.search.month,
          }
        }
        postData.year = this.search.year
        postData.datacenterId = this.datacenterId
        if (url === '') { return }

        gPostAction(url, postData).then((res) => {
          if (res.success) {
            this.consumptionData = res.data.statistics
            this.consumptionList = res.data.list
          }
        })
      }
    }
  }
</script>

<style
  lang="less"
  scoped
>
  .col-wrapper {
    margin: 6px 30px;
  }

  .info-box {

    .info-title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      font-weight: bolder;
      font-size: 20px;
    }

    .info-content {
      padding: 10px 0 15px;

      .info-content-item {
        display: inline-block;
        width: 33%;
        text-align: center;

        .item-title {
          padding: 5px 0 15px 0;
        }

        .item-text {
          margin-bottom: 5px;

          & span:first-child {
            padding-right: 10px;
            line-height: 20px;
            font-weight: bolder;
            font-size: 30px;
          }

          span {
            font-weight: bolder;
            font-size: 14px;
          }
        }
      }
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    height: 29px;
    color: #017972;

    &::before {
      content: '';
      height: 16px;
      display: inline-block;
      border-left: 2px solid #017972;
      padding-right: 10px;
    }
  }

  .search-tool {
    margin-left: 15px;
    min-width: 20%;
  }

  .flex-end {
    padding-right: 99px;
    display: flex;
    justify-content: flex-end;
  }
</style>